<template>
  <div class="collection-pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: {
    page: number
    limit: number
  }
  total: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: { page: number; limit: number }): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
}>()

const currentPage = ref(props.modelValue.page)
const pageSize = ref(props.modelValue.limit)

watch(
  () => props.modelValue,
  (newVal) => {
    currentPage.value = newVal.page
    pageSize.value = newVal.limit
  },
  { deep: true }
)

const handleSizeChange = (size: number) => {
  pageSize.value = size
  emit('update:modelValue', { page: currentPage.value, limit: size })
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  emit('update:modelValue', { page, limit: pageSize.value })
  emit('current-change', page)
}
</script>

<style scoped lang="scss">
.collection-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>